<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


	
		<title>Periodic Table of the Elements - Josh Duck</title>
		
		
		
		<!--[if lt IE 8]><link rel="stylesheet" href="/css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
		
				
						
			
<link rel="stylesheet" type="text/css" href="index.css" media="all">
</head>
<body class="" id="periodic-table"><div id="_atssh" style="visibility: hidden; height: 1px; width: 1px; position: absolute; z-index: 100000;"><iframe src="index_1.html" style="height: 1px; width: 1px; position: absolute; z-index: 100000; border: 0pt none; left: 0pt; top: 0pt;" title="AddThis utility frame" id="_atssh450"></iframe></div>
					<div id="header-wrapper">
				<div id="header">
					<h1 id="banner"><a href="http://joshduck.com/">Josh Duck</a></h1>
					<ul id="navigation">
						<li id="blog-button" class="">
							<a href="http://joshduck.com/blog/">Blog</a>
						</li>
						<li id="projects-button" class="">
							<a href="http://joshduck.com/projects.html">Projects</a>
						</li>
						<li id="photography-button" class="">
							<a href="http://joshduck.com/photography.html">Photography</a>
						</li>
					</ul>
				</div>
			</div>
				<div id="content-wrapper">
			<div id="content">
				

<div class="span-24">
	<div class="span-6 alpha">
		<div class="block aside">
			<h2>HTML5 Elements</h2>
			<p>The table below shows the 106 elements currently in the <a href="http://www.w3.org/TR/html5/">HTML5 working draft</a> and two proposed elements (marked with an asterisk).</p>
			<div class="addthis_toolbox addthis_default_style" addthis:url="http://joshduck.com/periodic-table.html" addthis:title="Periodic Table of HTML5 Elements"><a href="http://www.addthis.com/bookmark.php?v=250&amp;username=joshduck" class="addthis_button_compact at300m"><span class="at300bs at15nc at15t_compact"></span>Share this</a>
				<a title="Send to Reddit" target="_top" href="http://www.addthis.com/bookmark.php?v=250&amp;winname=addthis&amp;pub=joshduck&amp;source=tbx-250&amp;lng=zh-CN&amp;s=reddit&amp;url=http%3A%2F%2Fjoshduck.com%2Fperiodic-table.html&amp;title=Periodic%20Table%20of%20HTML5%20Elements&amp;ate=AT-joshduck/-/-/4dc9d8ef7b82cc4a/1&amp;uid=4dc9d8effe533493&amp;tt=0" class="addthis_button_reddit at300b"><span class="at300bs at15nc at15t_reddit"></span></a>
				<a title="Tweet This" target="_blank" class="addthis_button_twitter at300b"><span class="at300bs at15nc at15t_twitter"></span></a>
				<a title="Send to StumbleUpon" target="_top" href="http://www.addthis.com/bookmark.php?v=250&amp;winname=addthis&amp;pub=joshduck&amp;source=tbx-250&amp;lng=zh-CN&amp;s=stumbleupon&amp;url=http%3A%2F%2Fjoshduck.com%2Fperiodic-table.html&amp;title=Periodic%20Table%20of%20HTML5%20Elements&amp;ate=AT-joshduck/-/-/4dc9d8ef7b82cc4a/2&amp;uid=4dc9d8ef6da108ff&amp;tt=0" class="addthis_button_stumbleupon at300b"><span class="at300bs at15nc at15t_stumbleupon"></span></a>
			<div class="atclear"></div></div>
			
		</div>
	</div>

	<div class="span-18 last omega">
		<div class="block main gallery">
			<h2>How are they used?</h2>
			<form method="get" action="http://joshduck.com/periodic-table.html" id="url-form">
				<label for="url-input">http://</label><input name="url" id="url-input" value="">
				<button type="submit">Inspect</button>
							</form>
			<div>
				Some suggestions:
				<ul id="url-list">
											<li><a href="http://joshduck.com/periodic-table.html?url=www.reddit.com">reddit.com</a></li>
											<li><a href="http://joshduck.com/periodic-table.html?url=news.ycombinator.com">news.ycombinator.com</a></li>
											<li><a href="http://joshduck.com/periodic-table.html?url=www.youtube.com">youtube.com</a></li>
											<li><a href="http://joshduck.com/periodic-table.html?url=www.google.com">google.com</a></li>
											<li><a href="http://joshduck.com/periodic-table.html?url=www.yahoo.com">yahoo.com</a></li>
											<li><a href="http://joshduck.com/periodic-table.html?url=www.wired.com">wired.com</a></li>
											<li><a href="http://joshduck.com/periodic-table.html?url=www.bbc.co.uk">bbc.co.uk</a></li>
											<li><a href="http://joshduck.com/periodic-table.html?url=en.wikipedia.org">en.wikipedia.org</a></li>
											<li><a href="http://joshduck.com/periodic-table.html?url=www.w3.org">w3.org</a></li>
											<li><a href="http://joshduck.com/periodic-table.html?url=www.alistapart.com">alistapart.com</a></li>
											<li><a href="http://joshduck.com/periodic-table.html?url=www.joshduck.com">joshduck.com</a></li>
									</ul>
			</div>
		</div>
	</div>
</div>

<h1 class="star">Periodic Table of the Elements</h1>

<table id="elements" cellpadding="0" cellspacing="0">
<tbody><tr>
<td>
<div class="element root">
<div class="info">
	<h3>&lt;html&gt;</h3>
	<p>Document root element.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_html.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/semantics.html#the-html-element-0">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">html</div>
</div></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td class="active"></td><td></td><td>
<div class="element table">
<div class="info">
	<h3>&lt;col&gt;</h3>
	<p>Columns in a table.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_col.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/tabular-data.html#the-col-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">col</div>
</div></td><td>
<div class="element table">
<div class="info">
	<h3>&lt;table&gt;</h3>
	<p>Table of multi-dimensional data.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_table.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/tabular-data.html#the-table-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">table</div>
</div></td></tr>
<tr>
<td>
<div class="element document">
<div class="info">
	<h3>&lt;head&gt;</h3>
	<p>First element of the HTML document. Contains document metadata.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_head.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/semantics.html#the-head-element-0">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">head</div>
</div></td><td>
<div class="element text">
<div class="info">
	<h3>&lt;span&gt;</h3>
	<p>Container with no semantic meaning.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_span.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-span-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">span</div>
</div></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td>
<div class="element grouping">
<div class="info">
	<h3>&lt;div&gt;</h3>
	<p>Container with no semantic meaning.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_div.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/grouping-content.html#the-div-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">div</div>
</div></td><td>
<div class="element form">
<div class="info">
	<h3>&lt;fieldset&gt;</h3>
	<p>Set of form controls grouped by theme.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_fieldset.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/rendering.html#the-fieldset-element-0">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">fieldset</div>
</div></td><td>
<div class="element form">
<div class="info">
	<h3>&lt;form&gt;</h3>
	<p>Form.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_form.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/forms.html#the-form-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">form</div>
</div></td><td>
<div class="element sections">
<div class="info">
	<h3>&lt;body&gt;</h3>
	<p>Document content.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_body.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/sections.html#the-body-element-0">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">body</div>
</div></td><td class="">
<div class="element sections">
<div style="display: none;" class="info">
	<h3>&lt;h1&gt;</h3>
	<p>Heading for the current section.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_hn.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">h1</div>
</div></td><td>
<div class="element sections">
<div class="info">
	<h3>&lt;section&gt;</h3>
	<p>Contains of elements grouped by theme, for example a chapter or tab box.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_section.asp">W3Schools</a></li><li><a href="http://html5doctor.com/the-section-element/">HTML5 Doctor</a></li><li><a href="http://www.w3.org/TR/html5/sections.html#the-section-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">section</div>
</div></td><td>
<div class="element table">
<div class="info">
	<h3>&lt;colgroup&gt;</h3>
	<p>Defines a group of columns in a table.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_colgroup.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/tabular-data.html#the-colgroup-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">colgroup</div>
</div></td><td>
<div class="element table">
<div class="info">
	<h3>&lt;tr&gt;</h3>
	<p>A row of cells.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_tr.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/tabular-data.html#the-tr-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">tr</div>
</div></td></tr>
<tr>
<td>
<div class="element document">
<div class="info">
	<h3>&lt;title&gt;</h3>
	<p>Document title.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_title.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/semantics.html#the-title-element-0">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">title</div>
</div></td><td>
<div class="element text">
<div class="info">
	<h3>&lt;a&gt;</h3>
	<p>Hyperlink.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_a.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-a-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">a</div>
</div></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td>
<div class="element grouping">
<div class="info">
	<h3>&lt;pre&gt;</h3>
	<p>Text that is preformatted in the HTML code.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_pre.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/grouping-content.html#the-pre-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">pre</div>
</div></td><td>
<div class="element form">
<div class="info">
	<h3>&lt;meter&gt;</h3>
	<p>Control for entering a numeric value in a known range.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_meter.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/rendering.html#the-meter-element-0">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">meter</div>
</div></td><td>
<div class="element form">
<div class="info">
	<h3>&lt;select&gt;</h3>
	<p>Control for selecting from multiple options.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_select.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/rendering.html#the-select-element-0">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">select</div>
</div></td><td class="">
<div class="element sections">
<div style="display: none;" class="info">
	<h3>&lt;aside&gt;</h3>
	<p>Content related to surrounding elements that doesn't belong inline, such as a advertising or quotes.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_aside.asp">W3Schools</a></li><li><a href="http://html5doctor.com/aside-revisited/">HTML5 Doctor</a></li><li><a href="http://www.w3.org/TR/html5/sections.html#the-aside-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">aside</div>
</div></td><td>
<div class="element sections">
<div class="info">
	<h3>&lt;h2&gt;</h3>
	<p>Heading for the current section.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_hn.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">h2</div>
</div></td><td>
<div class="element sections">
<div class="info">
	<h3>&lt;header&gt;</h3>
	<p>Navigation or introductory elements for the current section.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_header.asp">W3Schools</a></li><li><a href="http://html5doctor.com/the-header-element/">HTML5 Doctor</a></li><li><a href="http://www.w3.org/TR/html5/sections.html#the-header-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">header</div>
</div></td><td>
<div class="element table">
<div class="info">
	<h3>&lt;caption&gt;</h3>
	<p>Title of a table.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_caption.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/tabular-data.html#the-caption-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">caption</div>
</div></td><td>
<div class="element table">
<div class="info">
	<h3>&lt;td&gt;</h3>
	<p>Table cell.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_td.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/tabular-data.html#the-td-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">td</div>
</div></td></tr>
<tr>
<td>
<div class="element document">
<div class="info">
	<h3>&lt;meta&gt;</h3>
	<p>Document metadata that can't be represented with other elements.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_meta.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/semantics.html#meta">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">meta</div>
</div></td><td>
<div class="element text">
<div class="info">
	<h3>&lt;rt&gt;</h3>
	<p>Annotation of preceeding text.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_rt.asp">W3Schools</a></li><li><a href="http://html5doctor.com/ruby-rt-rp-element/">HTML5 Doctor</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-rt-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">rt</div>
</div></td><td>
<div class="element text">
<div class="info">
	<h3>&lt;dfn&gt;</h3>
	<p>Term being defined by the parent section.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_phrase_elements.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-dfn-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">dfn</div>
</div></td><td>
<div class="element text">
<div class="info">
	<h3>&lt;em&gt;</h3>
	<p>Text that should be emphasised.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_phrase_elements.asp">W3Schools</a></li><li><a href="http://html5doctor.com/i-b-em-strong-element/">HTML5 Doctor</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-em-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">em</div>
</div></td><td>
<div class="element text">
<div class="info">
	<h3>&lt;i&gt;</h3>
	<p>Text in a alternate voice or mood, such as a technical term.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_i.asp">W3Schools</a></li><li><a href="http://html5doctor.com/i-b-em-strong-element/">HTML5 Doctor</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-i-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">i</div>
</div></td><td>
<div class="element text">
<div class="info">
	<h3>&lt;small&gt;</h3>
	<p>An aside, such as fine print.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_small.asp">W3Schools</a></li><li><a href="http://html5doctor.com/small-hr-element/">HTML5 Doctor</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-small-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">small</div>
</div></td><td>
<div class="element text">
<div class="info">
	<h3>&lt;ins&gt;</h3>
	<p>Text that has been inserted during document editing.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_ins.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/edits.html#the-ins-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">ins</div>
</div></td><td>
<div class="element text">
<div class="info">
	<h3>&lt;s&gt;</h3>
	<p>Text that is outdated or no longer accurate.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_s.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-s-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">s</div>
</div></td><td>
<div class="element grouping">
<div class="info">
	<h3>&lt;br&gt;</h3>
	<p>Line break.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_br.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-br-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">br</div>
</div></td><td>
<div class="element grouping">
<div class="info">
	<h3>&lt;p&gt;</h3>
	<p>Paragraph content.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_p.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/grouping-content.html#the-p-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">p</div>
</div></td><td>
<div class="element grouping">
<div class="info">
	<h3>&lt;blockquote&gt;</h3>
	<p>Quote from another source.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_blockquote.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/grouping-content.html#the-blockquote-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">blockquote</div>
</div></td><td>
<div class="element form">
<div class="info">
	<h3>&lt;legend&gt;</h3>
	<p>Define a name for a fieldset.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_legend.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/forms.html#the-legend-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">legend</div>
</div></td><td>
<div class="element form">
<div class="info">
	<h3>&lt;optgroup&gt;</h3>
	<p>Group of option.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_optgroup.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/the-button-element.html#the-optgroup-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">optgroup</div>
</div></td><td>
<div class="element sections">
<div class="info">
	<h3>&lt;address&gt;</h3>
	<p>Contact information for the current article.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_address.asp">W3Schools</a></li><li><a href="http://html5doctor.com/the-address-element/">HTML5 Doctor</a></li><li><a href="http://www.w3.org/TR/html5/sections.html#the-address-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">address</div>
</div></td><td>
<div class="element sections">
<div class="info">
	<h3>&lt;h3&gt;</h3>
	<p>Heading for the current section.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_hn.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">h3</div>
</div></td><td>
<div class="element sections">
<div class="info">
	<h3>&lt;nav&gt;</h3>
	<p>Contains a collection of links.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_nav.asp">W3Schools</a></li><li><a href="http://html5doctor.com/nav-element/">HTML5 Doctor</a></li><li><a href="http://www.w3.org/TR/html5/sections.html#the-nav-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">nav</div>
</div></td><td>
<div class="element interactive">
<div class="info">
	<h3>&lt;menu&gt;</h3>
	<p>Set of commands.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_menu.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/interactive-elements.html#menus">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">menu</div>
</div></td><td>
<div class="element table">
<div class="info">
	<h3>&lt;th&gt;</h3>
	<p>Table heading.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_th.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/tabular-data.html#the-th-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">th</div>
</div></td></tr>
<tr>
<td>
<div class="element document">
<div class="info">
	<h3>&lt;base&gt;</h3>
	<p>Specifies URL which non-absolute URLs are relative to.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_base.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/semantics.html#the-base-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">base</div>
</div></td><td>
<div class="element text">
<div class="info">
	<h3>&lt;rp&gt;</h3>
	<p>Contains semantically meaningless markup for browsers that don't understand ruby annotations.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_rp.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-rp-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">rp</div>
</div></td><td>
<div class="element text">
<div class="info">
	<h3>&lt;abbr&gt;</h3>
	<p>Abbreviation or acronym.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_abbr.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-abbr-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">abbr</div>
</div></td><td>
<div class="element text">
<div class="info">
	<h3>&lt;time&gt;</h3>
	<p>Time defined in a machine readable format.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_time.asp">W3Schools</a></li><li><a href="http://html5doctor.com/the-time-element/">HTML5 Doctor</a></li><li><a href="http://www.w3.org/TR/html5/rendering.html#the-time-element-0">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">time</div>
</div></td><td>
<div class="element text">
<div class="info">
	<h3>&lt;b&gt;</h3>
	<p>Stylistically separated text of equal importance, such as a product name.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_b.asp">W3Schools</a></li><li><a href="http://html5doctor.com/i-b-em-strong-element/">HTML5 Doctor</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-b-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">b</div>
</div></td><td>
<div class="element text">
<div class="info">
	<h3>&lt;strong&gt;</h3>
	<p>Text that is important.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_phrase_elements.asp">W3Schools</a></li><li><a href="http://html5doctor.com/i-b-em-strong-element/">HTML5 Doctor</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-strong-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">strong</div>
</div></td><td>
<div class="element text">
<div class="info">
	<h3>&lt;del&gt;</h3>
	<p>Text that has been removed during document editing.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_del.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/edits.html#the-del-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">del</div>
</div></td><td>
<div class="element text">
<div class="info">
	<h3>&lt;kbd&gt;</h3>
	<p>Example input (usually keyboard) for a program.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_phrase_elements.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-kbd-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">kbd</div>
</div></td><td>
<div class="element grouping">
<div class="info">
	<h3>&lt;hr&gt;</h3>
	<p>Thematic break within a paragraph.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_hr.asp">W3Schools</a></li><li><a href="http://html5doctor.com/small-hr-element/">HTML5 Doctor</a></li><li><a href="http://www.w3.org/TR/html5/rendering.html#the-hr-element-0">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">hr</div>
</div></td><td>
<div class="element grouping">
<div class="info">
	<h3>&lt;ol&gt;</h3>
	<p>Ordered list.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_ol.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/grouping-content.html#the-ol-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">ol</div>
</div></td><td>
<div class="element grouping">
<div class="info">
	<h3>&lt;dl&gt;</h3>
	<p>List of term-description pairs.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_dl.asp">W3Schools</a></li><li><a href="http://html5doctor.com/the-dl-element/">HTML5 Doctor</a></li><li><a href="http://www.w3.org/TR/html5/grouping-content.html#the-dl-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">dl</div>
</div></td><td>
<div class="element form">
<div class="info">
	<h3>&lt;label&gt;</h3>
	<p>Caption for a form control.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_label.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/forms.html#the-label-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">label</div>
</div></td><td>
<div class="element form">
<div class="info">
	<h3>&lt;option&gt;</h3>
	<p>Single option within a select control.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_option.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/the-button-element.html#the-option-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">option</div>
</div></td><td>
<div class="element form">
<div class="info">
	<h3>&lt;datalist&gt;</h3>
	<p>Define sets of options.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_datalist.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/the-button-element.html#the-datalist-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">datalist</div>
</div></td><td>
<div class="element sections">
<div class="info">
	<h3>&lt;h4&gt;</h3>
	<p>Heading for the current section.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_hn.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">h4</div>
</div></td><td>
<div class="element sections">
<div class="info">
	<h3>&lt;article&gt;</h3>
	<p>Section of the page content, such as a blog or forum post.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_article.asp">W3Schools</a></li><li><a href="http://html5doctor.com/the-article-element/">HTML5 Doctor</a></li><li><a href="http://www.w3.org/TR/html5/sections.html#the-article-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">article</div>
</div></td><td>
<div class="element interactive">
<div class="info">
	<h3>&lt;command&gt;</h3>
	<p>Command the user can perform, such as publishing an article.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_command.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/interactive-elements.html#the-command">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">command</div>
</div></td><td>
<div class="element table">
<div class="info">
	<h3>&lt;tbody&gt;</h3>
	<p>Contains rows that hold the table's data.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_tbody.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/tabular-data.html#the-tbody-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">tbody</div>
</div></td></tr>
<tr>
<td>
<div class="element document">
<div class="info">
	<h3>&lt;link&gt;</h3>
	<p>Other resources related to the document.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_link.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/semantics.html#the-link-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">link</div>
</div></td><td>
<div class="element document">
<div class="info">
	<h3>&lt;noscript&gt;</h3>
	<p>Contains elements that are part of the document only if scripting is disabled.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_noscript.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/scripting-1.html#the-noscript-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">noscript</div>
</div></td><td>
<div class="element text">
<div class="info">
	<h3>&lt;q&gt;</h3>
	<p>Quoted text.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_q.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-q-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">q</div>
</div></td><td>
<div class="element text">
<div class="info">
	<h3>&lt;var&gt;</h3>
	<p>Mathematical or programming variable.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_phrase_elements.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-var-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">var</div>
</div></td><td>
<div class="element text">
<div class="info">
	<h3>&lt;sub&gt;</h3>
	<p>Subscript text.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_sup.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-sub-and-sup-elements">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">sub</div>
</div></td><td>
<div class="element text">
<div class="info">
	<h3>&lt;mark&gt;</h3>
	<p>Text highlighted for referencing elsewhere.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_mark.asp">W3Schools</a></li><li><a href="http://html5doctor.com/draw-attention-with-mark/">HTML5 Doctor</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-mark-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">mark</div>
</div></td><td>
<div class="element text">
<div class="info">
	<h3>&lt;bdi&gt;</h3>
	<p>Text that is separated from directional formatting of its surroundings.</p>	<ul class="links"><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-bdi-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">bdi</div>
</div></td><td>
<div class="element text">
<div class="info">
	<h3>&lt;wbr&gt;</h3>
	<p>Opportunity for a line break.</p>	<ul class="links"><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-wbr-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">wbr</div>
</div></td><td>
<div class="element grouping">
<div class="info">
	<h3>&lt;figcaption&gt;</h3>
	<p>Caption for a figure.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_figcaption.asp">W3Schools</a></li><li><a href="http://html5doctor.com/the-figure-figcaption-elements/">HTML5 Doctor</a></li><li><a href="http://www.w3.org/TR/html5/grouping-content.html#the-figcaption-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">figcaption</div>
</div></td><td>
<div class="element grouping">
<div class="info">
	<h3>&lt;ul&gt;</h3>
	<p>Unordered list.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_ul.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/grouping-content.html#the-ul-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">ul</div>
</div></td><td>
<div class="element grouping">
<div class="info">
	<h3>&lt;dt&gt;</h3>
	<p>Term which will be described.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_dt.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/grouping-content.html#the-dt-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">dt</div>
</div></td><td>
<div class="element form">
<div class="info">
	<h3>&lt;input&gt;</h3>
	<p>Generic form input.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_input.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/the-input-element.html#the-input-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">input</div>
</div></td><td>
<div class="element form">
<div class="info">
	<h3>&lt;output&gt;</h3>
	<p>Contains the results of a calculation.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_output.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/the-button-element.html#the-output-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">output</div>
</div></td><td>
<div class="element form">
<div class="info">
	<h3>&lt;keygen&gt;</h3>
	<p>Generates private-public key pairs.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_keygen.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/rendering.html#the-keygen-element-0">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">keygen</div>
</div></td><td>
<div class="element sections">
<div class="info">
	<h3>&lt;h5&gt;</h3>
	<p>Heading for the current section.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_hn.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">h5</div>
</div></td><td>
<div class="element sections">
<div class="info">
	<h3>&lt;footer&gt;</h3>
	<p>Footer of the current section.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_footer.asp">W3Schools</a></li><li><a href="http://html5doctor.com/the-footer-element-update/">HTML5 Doctor</a></li><li><a href="http://www.w3.org/TR/html5/sections.html#the-footer-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">footer</div>
</div></td><td>
<div class="element interactive">
<div class="info">
	<h3>&lt;summary&gt;</h3>
	<p>Caption of a details element.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_summary.asp">W3Schools</a></li><li><a href="http://html5doctor.com/summary-figcaption-element/">HTML5 Doctor</a></li><li><a href="http://www.w3.org/TR/html5/interactive-elements.html#the-summary-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">summary</div>
</div></td><td>
<div class="element table">
<div class="info">
	<h3>&lt;thead&gt;</h3>
	<p>Contains rows with table headings.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_thead.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/tabular-data.html#the-thead-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">thead</div>
</div></td></tr>
<tr>
<td>
<div class="element document">
<div class="info">
	<h3>&lt;style&gt;</h3>
	<p>Styling defined inline data.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_style.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/semantics.html#the-style-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">style</div>
</div></td><td>
<div class="element document">
<div class="info">
	<h3>&lt;script&gt;</h3>
	<p>Inline or linked client side scripts.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_script.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/scripting-1.html#script">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">script</div>
</div></td><td>
<div class="element text">
<div class="info">
	<h3>&lt;cite&gt;</h3>
	<p>Title of a referenced piece of work.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_phrase_elements.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-cite-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">cite</div>
</div></td><td>
<div class="element text">
<div class="info">
	<h3>&lt;samp&gt;</h3>
	<p>Sample output of a program.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_phrase_elements.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-samp-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">samp</div>
</div></td><td>
<div class="element text">
<div class="info">
	<h3>&lt;sup&gt;</h3>
	<p>Superscript text.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_sup.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-sub-and-sup-elements">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">sup</div>
</div></td><td>
<div class="element text">
<div class="info">
	<h3>&lt;ruby&gt;</h3>
	<p>Contains text with annotations, such as pronounciation hints. Commonly used in East Asian text.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_ruby.asp">W3Schools</a></li><li><a href="http://html5doctor.com/ruby-rt-rp-element/">HTML5 Doctor</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-ruby-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">ruby</div>
</div></td><td>
<div class="element text">
<div class="info">
	<h3>&lt;bdo&gt;</h3>
	<p>Defines directional formatting for content.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_bdo.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-bdo-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">bdo</div>
</div></td><td>
<div class="element text">
<div class="info">
	<h3>&lt;code&gt;</h3>
	<p>Fragment of code.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_phrase_elements.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-code-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">code</div>
</div></td><td>
<div class="element grouping">
<div class="info">
	<h3>&lt;figure&gt;</h3>
	<p>Contains elements related to single concept, such as an illustration or code example.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_figure.asp">W3Schools</a></li><li><a href="http://html5doctor.com/the-figure-figcaption-elements/">HTML5 Doctor</a></li><li><a href="http://www.w3.org/TR/html5/grouping-content.html#the-figure-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">figure</div>
</div></td><td>
<div class="element grouping">
<div class="info">
	<h3>&lt;li&gt;</h3>
	<p>List item.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_li.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/grouping-content.html#the-li-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">li</div>
</div></td><td>
<div class="element grouping">
<div class="info">
	<h3>&lt;dd&gt;</h3>
	<p>Description for the preceeding term.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_dd.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/grouping-content.html#the-dd-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">dd</div>
</div></td><td>
<div class="element form">
<div class="info">
	<h3>&lt;textarea&gt;</h3>
	<p>Multiline free-form text input.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_textarea.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/rendering.html#the-textarea-element-0">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">textarea</div>
</div></td><td>
<div class="element form">
<div class="info">
	<h3>&lt;button&gt;</h3>
	<p>A button.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_button.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/rendering.html#the-button-element-0">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">button</div>
</div></td><td>
<div class="element form">
<div class="info">
	<h3>&lt;progress&gt;</h3>
	<p>Control for displaying progress of a task.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_progress.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/rendering.html#the-progress-element-0">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">progress</div>
</div></td><td>
<div class="element sections">
<div class="info">
	<h3>&lt;h6&gt;</h3>
	<p>Heading for the current section.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_hn.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">h6</div>
</div></td><td>
<div class="element sections">
<div class="info">
	<h3>&lt;hgroup&gt;</h3>
	<p>Collection of headings for the current section. The highest ranked heading repesents the group in the document outline.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_hgroup.asp">W3Schools</a></li><li><a href="http://html5doctor.com/the-hgroup-element/">HTML5 Doctor</a></li><li><a href="http://www.w3.org/TR/html5/sections.html#the-hgroup-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">hgroup</div>
</div></td><td>
<div class="element interactive">
<div class="info">
	<h3>&lt;details&gt;</h3>
	<p>Contains additional information, such as the contents of an accordian view.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_details.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/rendering.html#the-details-element-0">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">details</div>
</div></td><td>
<div class="element table">
<div class="info">
	<h3>&lt;tfoot&gt;</h3>
	<p>Contains rows with summary of data.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_tfoot.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/tabular-data.html#the-tfoot-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">tfoot</div>
</div></td></tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td>
<div class="element embedding">
<div class="info">
	<h3>&lt;img&gt;</h3>
	<p>An image.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_img.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/embedded-content-1.html#the-img-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">img</div>
</div></td><td>
<div class="element embedding">
<div class="info">
	<h3>&lt;area&gt;</h3>
	<p>Hyperlink area in an image map.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_area.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/the-map-element.html#the-area-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">area</div>
</div></td><td>
<div class="element embedding">
<div class="info">
	<h3>&lt;map&gt;</h3>
	<p>Image map for adding hyperlinks to parts of an image.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_map.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/the-map-element.html#the-map-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">map</div>
</div></td><td>
<div class="element embedding">
<div class="info">
	<h3>&lt;embed&gt;</h3>
	<p>Reference to non-HTML content.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_embed.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/the-iframe-element.html#the-embed-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">embed</div>
</div></td><td>
<div class="element embedding">
<div class="info">
	<h3>&lt;object&gt;</h3>
	<p>External resource such as an image, iframe or plugin.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_object.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/the-iframe-element.html#the-object-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">object</div>
</div></td><td>
<div class="element embedding">
<div class="info">
	<h3>&lt;param&gt;</h3>
	<p>Parameters for the parent object.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_param.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/the-iframe-element.html#the-param-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">param</div>
</div></td><td>
<div class="element embedding">
<div class="info">
	<h3>&lt;source&gt;</h3>
	<p>Alternative sources for parent video or audio elements.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_source.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/video.html#the-source-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">source</div>
</div></td><td>
<div class="element embedding">
<div class="info">
	<h3>&lt;iframe&gt;</h3>
	<p>Nested browser frame.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_iframe.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/the-iframe-element.html#the-iframe-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">iframe</div>
</div></td><td>
<div class="element embedding">
<div class="info">
	<h3>&lt;canvas&gt;</h3>
	<p>Bitmap which is editable by client side scripts.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_canvas.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/the-canvas-element.html#the-canvas-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">canvas</div>
</div></td><td>
<div class="element embedding">
<div class="info">
	<h3>&lt;track&gt;</h3>
	<p>Specifies external timing track for media elements.</p><p>This element is still being drafted.</p>	<ul class="links"><li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#the-track-element">WHATWG</a></li></ul>
</div>
<div class="icon" style="">track*</div>
</div></td><td>
<div class="element embedding">
<div class="info">
	<h3>&lt;audio&gt;</h3>
	<p>Audio file.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_audio.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/video.html#audio">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">audio</div>
</div></td><td>
<div class="element embedding">
<div class="info">
	<h3>&lt;video&gt;</h3>
	<p>Video.</p>	<ul class="links"><li><a href="http://www.w3schools.com/html5/tag_video.asp">W3Schools</a></li><li><a href="http://www.w3.org/TR/html5/video.html#video">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">video</div>
</div></td><td>
<div class="element embedding">
<div class="info">
	<h3>&lt;device&gt;</h3>
	<p>Allows scripts to access devices such as a webcam.</p><p>This element is still being drafted.</p>	<ul class="links"><li><a href="http://dev.w3.org/html5/html-device/">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">device*</div>
</div></td></tr>
</tbody></table>

<ul id="legend">
	<li class="root"><div class="icon"><!-- --></div>Root element</li>
	<li class="text"><div class="icon"><!-- --></div>Text-level semantics</li>
	<li class="form"><div class="icon"><!-- --></div>Forms</li>
	<li class="table"><div class="icon"><!-- --></div>Tabular data</li>	
	<li class="document"><div class="icon"><!-- --></div>Metadata and scripting</li>
	<li class="grouping"><div class="icon"><!-- --></div>Grouping content</li>
	<li class="sections"><div class="icon"><!-- --></div>Document sections</li>
	<li class="interactive"><div class="icon"><!-- --></div>Interactive elements</li>
	<li class="embedding"><div class="icon"><!-- --></div>Embedding content</li>
</ul>			</div>
		</div>

					
			
			</body>
</html>
